<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>完善个人信息</title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js " type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
	</head>
	<style>
		#app{
			width: 78%;
			margin: 0 auto;
			border: 1px solid #F5F5F5;
		}
		
		#info-container{
			width: 50%;
			margin: 0 auto;
			border: 1px solid #F5F5F5;
		}
		
		
		
	</style>
	<body>
		<div id="app">
			<div id="info-container">
				<div style="text-align: center;"><span style="color: #B3E19D; font-size: 20px;">完善个人信息</span></div>
				<el-form ref="form" id="form" label-width="80px">
					<el-form-item label="头像">
						<input type="file" id="file" name="file">
					</el-form-item>
					<el-form-item label="昵称">
						<el-input v-model="params.userInfo.nickname"></el-input>
					</el-form-item>
					<el-form-item v-if="userInfo.user.tel == null" label="手机号">
						<el-input v-model="params.userInfo.tel" placeholder="手机号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="params.userInfo.code" v-if="userInfo.user.tel == null" placeholder="验证码">
							<el-button style="width: 100px;" slot="append" :disabled="safety.state" @click="getBindingCode()">{{safety.state?safety.time + 's':'获取验证码'}}</el-button>
						</el-input>
					</el-form-item>
					<el-form-item label="信息公开">
						<el-radio-group v-model="params.userInfo.infoLevel">
							<el-radio :label="1">保密</el-radio>
							<el-radio :label="2">好友公开</el-radio>
							<el-radio :label="3">全部公开</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="finishStudentInfo()">提交</el-button>
					</el-form-item>

					<!-- 		<el-form-item label="活动名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="活动区域">
						<el-select v-model="form.region" placeholder="请选择活动区域">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="活动时间">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
						</el-col>
					</el-form-item>
					
					<el-form-item label="即时配送">
						<el-switch v-model="form.delivery"></el-switch>
					</el-form-item>
					<el-form-item label="活动性质">
						<el-checkbox-group v-model="form.type">
							<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
							<el-checkbox label="地推活动" name="type"></el-checkbox>
							<el-checkbox label="线下主题活动" name="type"></el-checkbox>
							<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item label="活动形式">
						<el-input type="textarea" v-model="form.desc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item> -->
				</el-form>
			</div>
		</div>
		<script type="text/javascript">
            var zullstr="http://192.168.10.58:11000/user-coach/"
			var app = new Vue({
				el: "#app",
				data: {
					form: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					},
					params: {
						userInfo: {
							userId: '',
							realName: '',
							nickname: '',
							infoLevel: 1,
						}
					},
					url: '',
					// 当前用户的所有的信息	
					userInfo: {
						"userinfoId": 1,
						"userId": 1,
						"realName": "张三",
						"headPortrait": null,
						"nickname": "鸡你太美",
						"infoLevel": 2,
						"preLoginAddress": "重庆",
						"acccountId": 1,
						"qq": "",
						"wechat": null,
						"phone": null,
						"a": null,
						"b": null,
						"c": null,
						"user": {
							"userId": 1,
							"email": "12321432@qq.com",
							"tel": "123212132132324",
							"password": "423",
							"username": "213213",
							"roleId": 1,
							"status": 0,
							"longitude": null,
							"latitude": null,
							"a": null,
							"b": null,
							"c": null
						},
						"coachInfo": null,
						"coachTime": null

					},
					// 验证码
					safety: {
						time: 60,
						state: false,
						interval: ''
					},
				},
				created: function() {
					// 获取当前用户id 以及角色
				},
				mounted: function() {
					// 获取当前用户id 以及角色
					this.getUserinfo();
				},

				methods: {
					onSubmit() {
						console.log('submit!');
					},
					a: function() {
						alert(1);
						$("#fils").click();
					},
					// 获取当前用户的所有信息
					getUserinfo: function() {
						var _this = this;
						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url: zullstr+"http://localhost:8000/userinfo/getuserInfobyuserid",
							data: {
								userId: 1
							},
							dataType: "json",
							header: {
								'Content-type': 'application/x-www-form-urlencoded'
							},
							type: "POST",
							success: function(data) {
								if (data != null) {
									_this.userInfo = data;
									_this.params.userInfo.nickname = _this.userInfo.nickname;
								} else {
									_this.viewMsg("info", "获取信息失败");
								}
							},
							error: function(data) {
								_this.viewMsg("error", "服务器繁忙!");
							}
						});
					},


					// 获取验证码
					getBindingCode: function() {
						var _this = this;
						// 成功后显示倒计时60s后可在点击
						this.safety.state = true;
						// 倒计时
						this.safety.interval = setInterval(() => {
							if (this.safety.time-- <= 0) {
								this.safety.time = 60;
								this.safety.state = false;
								clearInterval(this.safety.interval);
							}
						}, 1000);


						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url:zullstr+ "http://localhost:8000/finishInfo/getBindingCode",
							data: {"tel":_this.params.userInfo.tel},
							dataType: "json",
							header: {
								'Content-type': 'application/x-www-form-urlencoded'
							},
							type: "get",
							success: function(data) {
								console.log(data);

								if (data.code == 200) {
									_this.viewMsg("success", data.message);
								} else {
									_this.viewMsg("info", data.message);
								}
							},
							error: function(data) {
								_this.viewMsg("error", "服务器繁忙!");
							}
						});
						this.viewMsg("success", "已发送请求!");
					},

					finishStudentInfo: function() {
						var _this = this;
						var formData = new FormData();
						var file = $("#file")[0].files;
						// var file = document.getElementById("file").files;
						
						formData.append("file",file[0]);
						
						console.log(formData.get("file"));
						
						var userinfo = _this.params.userInfo;
						for (var i in userinfo) {
							formData.append(i + "", userinfo[i]);
						}

						// 修改个人信息
						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url: zullstr+"http://localhost:8000/finishInfo/finishStudentInfo",
							data: formData,
							dataType: "json",
							// 不缓存
							cache: false,
							// jQuery不要去处理发送的数据
							processData: false,
							// jQuery不要去设置Content-Type请求头
							contentType: false,
							type: "POST",
							success: function(data) {
								console.log(data);
								if (data.code == 200) {
									_this.viewMsg("success", data.message);
								} else {
									_this.viewMsg("info", data.message);
								}
							},
							error: function(data) {
								_this.viewMsg("error", "服务器繁忙!");
							}
						});
					},




					// 封装的消息提示  success warning info  error
					viewMsg: function(type, message) {
						this.$message({
							type: type,
							message: message
						});
					},

				},

				watch: {

				}
			});
		</script>
	</body>
</html>
